<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>文件列表</title>
<link href="plug-in/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css"
	href="plug-in/bootstrap/css/default.css">
<script src="plug-in/bootstrap/js/jquery.min.js"></script>
<script src="plug-in/bootstrap/js/bootstrap.min.js"
	type="text/javascript"></script>
<script src="plug-in/bootstrap/js/bootstrap.min.js"
	type="text/javascript"></script>
</head>

<body>
	<div style="margin-left: 5%">
		<!-- 搜索区域 -->
		<div class="row" style="padding-bottom: 20px; margin-top: 20px;">
			<!-- 搜索框的长度为该行的3/4 -->
			<div class="col-md-9">
				<div class="input-group">
					<input id="searchString" type="text"
						style="height: 28px; width: 90%" class="form-control"
						placeholder="请输入查询内容"> <span class="input-group-btn">
						<button type="button" class="btn btn-info" onclick="search()"
							onkeypress="Enter()">
							<span class="glyphicon glyphicon-search" aria-hidden="true" />
							搜索
						</button>
					</span>
				</div>
			</div>
		</div>
		<!-- 表格显示 -->
		<div class="row">
			<div class="col-md-12" style="margin-top: 20px;">
				<div class="panel panel-info">
					<div class="panel-heading">文件列表</div>
					<table id="table"
						class="table table-striped table-bordered table-hover datatable">
						<thead id="tem">
							<th id="id">id</th>
							<th id="docName">文件名</th>
							<th id="docLabel">标签</th>
							<th id="docDesc">描述</th>
							<th id="download">下载</th>
						</thead>
						<tbody>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
	function search() {
		$.ajax({
			type : "post",//请求方式
			url : "./FileSearch",//发送请求地址
			data : { //发送给数据库的数据
				searchString : $("#searchString").val()
			},
			//请求成功后的回调函数有两个参数
			success : function(data, textStatus) {
				var dataObj = eval("(" + data + ")");
				//alert(dataObj.length);
				/*for(var i =0;i<dataObj.length;i++){
					alert(dataObj[i].dataList[0].id);*/

				var tb = document.getElementById('table');
				var rowNum = tb.rows.length;
				for (i = 1; i < rowNum; i++) {
					tb.deleteRow(i);
					rowNum = rowNum - 1;
					i = i - 1;
				}
				
				var obj = dataObj[0].dataList;

				for (var i = 0; i < obj.length; i++) {
					var str = "<td>" + obj[i].id + "</td>" + "<td>"
							+ obj[i].docName + "</td>" + "<td>"
							+ obj[i].docName + "</td>" + "<td>"
							+ obj[i].docDesc + "</td>";
					var down = str + "<td><a href='./FileDownLoad?id="
							+ obj[i].id + "&docName=" + obj[i].docName
							+ "'>download</a></td>"
					$('#table').append("<tr>" + down + "</tr>");

				}
				//}

				/**
				for(var i =0;i<dataObj.dataList.length;i++){
				
				//获取模板行，复制一行 
				   var row = $("#tem").clone(); 
				   //给每一行赋值
				   row.find("#id").text(dataObj[i].id); 
				   row.find("#docName").text(dataObj[i].docName); 
				   row.find("#docLabel").text(dataObj[i].docLabel);
				   row.find("#docDesc").text(dataObj[i].docDesc);
				   row.find("#download").text("下载").href("fileupload.jsp");
				   //将新行添加到表格中 
				   row.appendTo("#table");
				   
				   $('#table').append("<tr>")
				   var str = "<td>" + dataObj[i].id + "</td>" + "<td>" + dataObj[i].docName + "</td>"
				   + "<td>" + dataObj[i].docLabel + "</td>"  + "<td>" + dataObj[i].docDesc + "</td>";
				   var down = str +"<td><a href='./FileDownLoad?id="+dataObj[i].id +"&docName="+dataObj[i].docName+"'>download</a></td>"
				  
				   var str = "<td>" + dataObj[i].id + "</td>" + "<td>" + dataObj[i].name + "</td>"
				   + "<td>" + dataObj[i].name + "</td>"  + "<td>" + dataObj[i].function + "</td>";
				   var down = str +"<td><a href='./FileDownLoad?id="+dataObj[i].id +"&docName="+dataObj[i].docName+"'>download</a></td>"
				   
				   $('#table').append(down)
				   $('#table').append("</tr>")
				}
				 */
				//$("#resText").html(data);
			}
		});
	}
</script>
</html>

